<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <title>权限管理</title>
    <link rel="stylesheet" th:href="@{/admin/authority/authority.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <div th:include="common/header::topnavbar"></div>
    <div th:include="common/header::leftaside(activename='authorityManage')"></div>
    <!-- 内容区 -->
    <div class="content-wrapper">
        <!--内容区头部 -->
        <div class="content-header">
            <div class="header">
                <div class="title">权限管理<span th:text="${session.testVO}"></span></div>
                <div class="header-btn">
                    <button type="button" data-toggle="modal" data-target="#addmodal" class="btn btn-info"><i
                            class="fas fa-plus"></i> 新增角色
                    </button>
                </div>
            </div>

            <div class="container-fluid">
                <div class="card">
                    <div class="rolelist">
                        <table class="table table-striped table-bordered table-hover">
                            <thead class="thead-dark">
                            <tr>
                                <td>编号</td>
                                <td>角色名</td>
                                <td>创建时间</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody class="listbody">
                            </tbody>

                        </table>

                    </div>
                    <!--                   分页 -->
                    <div id="pagination"></div>
                </div>

            </div><!-- /.container-fluid -->
        </div>

        <!--        修改模态框-->
        <div id="editmodal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="msgModalLabel"
             aria-hidden="true">
            <form class="needs-validation validateForm  editdataForm" novalidate>

                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="msgModalLabel">修改角色</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" role="tab" href="#edit-basic"
                                       id="active-left">基本信息</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" role="tab" href="#edit-more"
                                       id="active-right">权限管理</a>
                                </li>
                            </ul>
                            <div class="tab-content mt-4">
                                <div role="tabpanel" class="tab-pane container animated fadeIn active" id="edit-basic">
                                    <div class="form-group d-flex">
                                        <!--                                <input style="display: none" type="text" id="id" name="id" >-->
                                        <label class="col-sm-3 control-label" style="display: none">角色编号：</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control userId" style="display: none"
                                                   name="id" id="id">
                                        </div>
                                    </div>
                                    <div class="form-group d-flex">
                                        <label class="col-sm-3 control-label">角色名称：</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control username" id="name" name="name"
                                                   disabled required autofocus="">
                                        </div>
                                        <div class="invalid-feedback">
                                            角色名称不能为空
                                        </div>
                                    </div>
                                    <div class="form-group d-flex">
                                        <label class="col-sm-3 control-label">角色简介：</label>
                                        <div class="col-sm-8">
                                <textarea class="form-control content" rows="3" maxlength="300" id="content"
                                          name="content" style="resize: none"
                                          placeholder="角色简介"></textarea>
                                            <span id="word">0</span><span>/300</span>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane container animated fadeIn" id="edit-more">
                                    <div class="form-group row" style="font-size: 15px;">


                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-4">
                                                    <div class="checkbox">
                                                        <label text="全选">
                                                            全选
                                                            <input type="checkbox" text="全选" value="全选"
                                                                   class="all-click">
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-12">
                                            <div th:each="permission:${authorityVO.permissionVOList}"
                                                 class="row menu-item">
                                                <div class="col-2">
                                                    <div class="checkbox">
                                                        <label th:text="${permission.menuName}"
                                                               th:value="${permission.id}" class="menu-name">

                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-2" th:each="auth:${permission.authVOList}">
                                                    <div class="checkbox">
                                                        <label>
                                                            <input type="checkbox" name="permission"
                                                                   th:value="${auth.authValue}"
                                                                   th:text="${auth.authName}"
                                                                   th:authName="${auth.authName}"
                                                            >
                                                        </label>
                                                    </div>
                                                </div>

                                            </div>


                                        </div>


                                    </div>
                                </div>

                            </div>
                        </div><!-- /.modal-content -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary valid-button editbtn" data-dismiss="modal">
                                提交更改
                            </button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
        <!--        删除确定框-->
        <div id="delmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleModalLabel"
             aria-hidden="true">
            <form class="needs-validation validateForm" novalidate>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="deleModalLabel">确认删除</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="delebody"><i class="fa-exclamation-circle fas"></i>删除后将无法恢复，确定吗</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal"><i class="fas fa-meh">我再想想</i>
                                </button>
                                <button type="submit" class="btn btn-primary valid-button delebtn"><i
                                        class="fas fa-check">狠心确定</i></button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div>
                </div>
            </form>
        </div>

        <!--        增加角色模态框-->
        <div id="addmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addmodallabel"
             aria-hidden="true">
            <form class="needs-validation validateForm adddataForm" novalidate>

                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="msgModalLabel">增加角色</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" role="tab" href="#add-basic">基本信息</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" role="tab" href="#add-more">权限管理</a>
                                </li>
                            </ul>
                            <div class="tab-content mt-4">
                                <div role="tabpanel" class="tab-pane container animated fadeIn active" id="add-basic">
                                    <!--<div class="form-group d-flex">-->
                                    <!--&lt;!&ndash;                                <input style="display: none" type="text" id="id" name="id" >&ndash;&gt;-->
                                    <!--<label class="col-sm-3 control-label" style="display: none">角色编号：</label>-->
                                    <!--<div class="col-sm-8">-->
                                    <!--<input type="text" class="form-control userId" style="display: none"-->
                                    <!--name="id" id="id">-->
                                    <!--</div>-->
                                    <!--</div>-->
                                    <div class="form-group d-flex">
                                        <label class="col-sm-3 control-label">角色名称：</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control username" id="name" name="name"
                                                   required autofocus="" placeholder="角色名称">
                                        </div>
                                        <div class="invalid-feedback">
                                            角色名称不能为空
                                        </div>
                                    </div>
                                    <div class="form-group d-flex">
                                        <label class="col-sm-3 control-label">角色简介：</label>
                                        <div class="col-sm-8">
                                <textarea class="form-control content" rows="3" maxlength="300" id="content"
                                          name="content" style="resize: none"
                                          placeholder="角色简介"></textarea>
                                            <span id="word">0</span><span>/300</span>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane container animated fadeIn" id="add-more">
                                    <div class="form-group row" style="font-size: 15px;">


                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-4">
                                                    <div class="checkbox">
                                                        <label text="全选">
                                                            全选
                                                            <input type="checkbox" text="全选" value="全选"
                                                                   class="all-click">
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-12">
                                            <div th:each="permission:${authorityVO.permissionVOList}"
                                                 class="row menu-item">
                                                <div class="col-2">
                                                    <div class="checkbox">
                                                        <label th:text="${permission.menuName}"
                                                               th:value="${permission.id}" class="menu-name">

                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-2" th:each="auth:${permission.authVOList}">
                                                    <div class="checkbox">
                                                        <label>
                                                            <input type="checkbox" name="permission"
                                                                   th:value="${auth.authValue}"
                                                                   th:text="${auth.authName}"
                                                                   th:authName="${auth.authName}">
                                                        </label>
                                                    </div>
                                                </div>

                                            </div>


                                        </div>


                                    </div>
                                </div>

                            </div>
                        </div><!-- /.modal-content -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary valid-button addbtn" data-dismiss="modal">
                                提交更改
                            </button>
                        </div>

                    </div>
                </div>
            </form>
        </div>

        <!-- /内容区头部 -->

        <!-- 内容区主体 -->

        <!-- /内容区主体 -->
    </div>
    <!-- /内容区 -->
    <!-- 右侧栏 -->
    <div th:include="~{common/header::rightaside}"></div>
    <!-- /右侧栏 -->
    <!-- 底部栏 -->
    <div th:include="~{common/footer::footer}"></div>
    <!--所有js必须放在jq下面-->
    <div th:replace="common/header::commonjs(~{::script})">
        <!--        私有的js-->
        <!--<script th:src="@{/plugins/jquery/jquery.min.js}"></script>-->
        <script th:src="@{/plugins/pagination/jquery.pagination.js}"></script>
        <script th:src="@{/admin/authority/index.js}" th:inline="javascript"></script>
    </div>
</div>

</body>
</html>